<template>
    <view class="normal-login-container" style="background-color: #f2ecde; height: 100vh">
        <!-- 头像部分 -->
        <view style="
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding-top: 5%;
        ">
            <n-avatar :size="148" :src="icon" color="#FFFFFF00"></n-avatar>
        </view>

        <!-- 表单内容 -->
        <view class="login-form-content">
            <!-- 用户名输入 -->
            <view>
                <el-input
                    class="inputgu"
                    @blur="inputColor[0] = '#f2be45'"
                    @focus="inputColor[0] = '#faff72'"
                    style="height:100rpx;font-size:32rpx;"
                    placeholder="请输入注册邮箱"
                    v-model="forgetForm.username"
                >
                    <template #prefix>
                        <el-icon :color="inputColor[0]" class="el-input__icon" :size="22">
                            <Message />
                        </el-icon>
                    </template>
                </el-input>
            </view>

            <!-- 验证码区域 -->
            <view class="code-container inputgu" style="width: 75%;">
                <el-input
                    @blur="inputColor[1] = '#f2be45'"
                    @focus="inputColor[1] = '#faff72'"
                    style="height:100rpx;font-size:32rpx;"
                    placeholder="请输入验证码"
                    v-model="forgetForm.code"
                >
                    <template #prefix>
                        <el-icon :color="inputColor[1]" class="el-input__icon" :size="22">
                            <Key />
                        </el-icon>
                    </template>
                </el-input>
                <button 
                    class="get-code-btn"
                    :class="{ 'disabled': isCounting }"
                    @click="getVerifyCode"
                    :disabled="isCounting"
                >
                    {{ codeBtnText }}
                </button>
            </view>

            <!-- 新密码 -->
            <view>
                <el-input
                    class="inputgu"
                    @blur="inputColor[2] = '#f2be45'"
                    @focus="inputColor[2] = '#faff72'"
                    type="password"
                    style="height:100rpx;font-size:32rpx;"
                    placeholder="请输入新密码"
                    v-model="forgetForm.newPassword"
                >
                    <template #prefix>
                        <el-icon :color="inputColor[2]" class="el-input__icon" :size="22">
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>
            </view>

            <!-- 确认密码 -->
            <view>
                <el-input
                    class="inputgu"
                    @blur="inputColor[3] = '#f2be45'"
                    @focus="inputColor[3] = '#faff72'"
                    type="password"
                    style="height:100rpx;font-size:32rpx;"
                    placeholder="请确认新密码"
                    v-model="forgetForm.confirmPassword"
                >
                    <template #prefix>
                        <el-icon :color="inputColor[3]" class="el-input__icon" :size="22">
                            <CircleCheck />
                        </el-icon>
                    </template>
                </el-input>
            </view>

            <!-- 提交按钮 -->
            <view class="action-btn">
                <button 
                    @click="handleSubmit" 
                    style="background-color:#f2be45;"
                    class="login-btn cu-btn block bg-blue lg round"
                >
                    确认修改
                </button>
            </view>
        </view>

        <!-- 返回登录 -->
        <view class="text-center" style="margin-top: 30rpx; font-size: 28rpx;">
            <text class="text-grey">想起密码？</text>
            <text @click="handleLogin" class="text-blue" style="margin-left: 10rpx;">去登录</text>
        </view>

        <!-- 协议声明 -->
        <view class="xieyi text-center">
            <text class="text-grey1">操作即代表同意</text>
            <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
            <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
const icon = ref('/static/images/login/icon.png')
const inputColor = ref(Array(4).fill('#f2be45'))

// 表单数据
const forgetForm = reactive({
    username: '',
    code: '',
    newPassword: '',
    confirmPassword: ''
})

// 验证码相关
const isCounting = ref(false)
const codeBtnText = ref('获取验证')
let countDown = 60

// 获取验证码
function getVerifyCode() {
    if (!forgetForm.username) {
        proxy.$modal.msgError('请输入注册邮箱')
        return
    }
    
    if (!isCounting.value) {
        isCounting.value = true
        const timer = setInterval(() => {
            if (countDown <= 0) {
                clearInterval(timer)
                isCounting.value = false
                codeBtnText.value = '重新获取'
                countDown = 60
            } else {
                codeBtnText.value = `${countDown}秒后重试`
                countDown--
            }
        }, 1000)
        
        // 调用发送验证码接口
        // sendCodeApi(forgetForm.username).then(...)
    }
}

// 提交修改
function handleSubmit() {
    if (!validateForm()) return
    
    proxy.$modal.loading('提交中...')
    // 调用重置密码接口
    // resetPassword(forgetForm).then(...)
}

// 表单验证
function validateForm() {
    const { username, code, newPassword, confirmPassword } = forgetForm
    if (!username) {
        proxy.$modal.msgError('请输入注册邮箱')
        return false
    }
    if (!code) {
        proxy.$modal.msgError('请输入验证码')
        return false
    }
    if (!newPassword) {
        proxy.$modal.msgError('请输入新密码')
        return false
    }
    if (newPassword !== confirmPassword) {
        proxy.$modal.msgError('两次输入密码不一致')
        return false
    }
    return true
}

// 跳转登录
function handleLogin() {
    uni.navigateBack()
}

// 协议处理（复用登录页面方法）
function handleUserAgrement() {
    const site = getApp().globalData.config.appInfo.agreements[1]
    proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
}

function handlePrivacy() {
    const site = getApp().globalData.config.appInfo.agreements[0]
    proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
}
</script>

<style lang="scss" scoped>
.normal-login-container {
    background-color: #ecfdf5 !important;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    
    &::before {
        content: '';
        position: absolute;
        top: -80px;
        left: -50px;
        right: -50px;
        height: 320px;
        background: linear-gradient(135deg, #059669 0%, #10b981 100%);
        transform: rotate(-8deg);
        z-index: 0;
        border-bottom-left-radius: 50% 30px;
        border-bottom-right-radius: 50% 30px;
    }
    
    /* 头像部分样式 */
    :deep(.n-avatar) {
        margin-top: 20px;
        position: relative;
        z-index: 1;
        border: 4px solid rgba(255, 255, 255, 0.7);
        box-shadow: 0 4px 15px rgba(5, 150, 105, 0.15);
    }

    .login-form-content {
        margin-top: 24px;
        width: 86%;
        margin: 24px auto 0;
        position: relative;
        z-index: 1;
        
        .inputgu {
            margin-top: 20px;
            border-radius: 16px;
            border: none;
            transition: all 0.3s ease;
            height: 56px;
            
            :deep(.el-input__wrapper) {
                background-color: rgba(236, 253, 245, 0.4);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                border-radius: 16px;
                height: 56px;
                padding: 0 16px;
                box-shadow: none !important;
                
                &:focus-within {
                    background-color: rgba(209, 250, 229, 0.4);
                }
            }
            
            :deep(.el-input__inner) {
                height: 56px;
                font-size: 16px;
                color: #065f46;
            }
            
            :deep(.el-input__icon) {
                line-height: 56px;
                color: #10b981 !important;
            }
        }
        
        .code-container {
            position: relative;
            height: 56px;
            margin-top: 20px;
            border-radius: 16px;
            overflow: visible;
            
            :deep(.el-input) {
                width: 100%;
                
                .el-input__wrapper {
                    padding-right: 190rpx;
                    background-color: rgba(236, 253, 245, 0.4);
                }
            }
            
            .get-code-btn {
                position: absolute;
                right: 0;
                top: 0;
                width: 180rpx;
                height: 56px;
                line-height: 56px;
                background: #10b981;
                color: #fff;
                font-size: 15px;
                font-weight: 500;
                border-radius: 0 16px 16px 0;
                transition: all 0.3s;
                -webkit-tap-highlight-color: transparent;
                z-index: 2;
                border-left: 1px solid rgba(209, 250, 229, 0.6);
                
                &.disabled {
                    background: rgba(148, 163, 184, 0.7);
                    color: rgba(255, 255, 255, 0.8);
                }
                
                &:active:not(.disabled) {
                    background: #047857;
                }
            }
        }
        
        .action-btn {
            margin-top: 36px;
            
            .login-btn {
                width: 100%;
                height: 56px;
                line-height: 56px;
                font-size: 18px;
                font-weight: 500;
                background-color: #059669 !important;
                border-radius: 16px;
                transition: all 0.3s ease;
                -webkit-tap-highlight-color: transparent;
                box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
                
                &:active {
                    transform: scale(0.98);
                    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
                    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.1);
                }
            }
        }
    }
    
    .text-center {
        font-size: 16px;
        position: relative;
        z-index: 1;
        margin-top: 24px;
        
        .text-grey {
            color: #4b5563;
        }
        
        .text-blue {
            color: #059669;
            margin-left: 6px;
            -webkit-tap-highlight-color: transparent;
            
            &:active {
                color: #047857;
            }
        }
    }
    
    .xieyi {
        position: fixed;
        bottom: 40px;
        width: 100%;
        font-size: 13px;
        color: #4b5563;
        position: relative;
        z-index: 1;
        padding: 0 10px;
        
        .text-blue {
            margin: 0 4px;
            color: #059669;
            -webkit-tap-highlight-color: transparent;
            
            &:active {
                color: #047857;
            }
        }
    }
}
</style>